<template>
  <div id="congzi">
    <div class="top">
      <div class="top-center">
        <span>充值方式</span>
        <i>微信支付</i>
        <img src="../../assets/image/right-push.png" alt>
      </div>
    </div>
    <div class="section">
      <div class="section-main">
        <h1>
          <p>
            <span class="online">在线充值</span>
            <!-- <i class="num">(充值金额为5~9999元)</i> -->
          </p>
        </h1>
        <ul class="main-list">
          <li :class="active==index?'mainactive':''" v-for="(item,index) in moneyarr" @click="mianclick(index)">
						<p class="main-title">{{item.title}}</p>
						<p class="main-min">售价:{{item.money}}元</p>
			</li>
          <li id="end1" v-if="!mainend" @click="chooseclick()">其他金额</li>
          <li id="end" v-else @click="mianend()">
				<p class="main-title">
				 
				   <input type="number" oninput="if(value.length>4)value=value.slice(0,4)" v-model="monechoose"><span>币</span>
				</p>
				<p class="main-min">售价:{{monechoose}}元</p>
			</li>
        </ul>
      </div>
    </div>
	<div class="actionbut"  @click="actionSheet">
		确认支付
	</div>
 
    <div>
         <mt-actionsheet :actions= "data" v-model="sheetVisible" cancelText="">
        </mt-actionsheet>
    </div>

        <!-- 绑定微信 -->
		<div class="shoewr-chenhoupass">
			<div class="chen-contener chenpass">
				<p class="chen-title">温馨提示</p>
				<p class="chen-text chen-textactive">您的账号没有绑定微信，不能使用微信支付</p>
				<div class="chen-but">
					<p class="chen-but-no" @click="repeatclose()">取消</p>
					<p class="chen-but-yes" @click="repeatclick()">去绑定</p>
				</div>
			</div>
		</div>
				
		<!-- 充值成功 -->
		<div class="detailsuccess">
			<div class="detailcontent2">
				<div class="detailcontent1">
					<div class="successtop">
						<div class="successpic">
							<img src="../../../src/assets/img/paytansuccess.png" alt="">
						</div>
						<div class="success_order">
							<img src="../../../src/assets/img/paysuccesstext.png" alt="">
						</div>
						<div class="successbottom">
							<!-- <div @click="backindex()">返回首页</div> -->
							<div class="successactive" @click="stuindex()">返回</div>
						</div>
					</div>
				</div>
				<div class="successclose" @click="closedetail">
					<img src="../../../src/assets/img/kechengxiangqing/tuichu.png" alt="">
				</div>
			</div>
		</div>
				
		<!-- 取消 -->
		<div class="detailfail">
			<div class="detailcontent1">
				<div class="successtop">
					<div class="successpic">
						<img src="../../../src/assets/img/failsu.png" alt="">
					</div>
					<div class="success_order">
						<img src="../../../src/assets/img/failtext.png" alt="">
					</div>
					<div class="successbottom">
						<div class="successactiveback" @click="stuindex()">返回</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 确定微信支付是否完成 -->
		<div class="wxpayshower">
			<div class="chen-free">
				<div class="chen-contener1 chenpass">
					<p class="chen-text chen-textactive">请确定微信支付是否已完成</p>
					<div class="finishpay" @click="finishclick()">已完成支付</div>
					<div class="finishpay1" @click="againclick()">支付遇到问题，重新支付</div>
				</div>
			</div>
		</div>


    </div>


  </div>
</template>
<script>
	export default {
		name: "zaixiancongzhi",
		 data () {
		    return {
			    is_band_wechat:'',
			     moneyarr:[{'title':'5币','money':5},{'title':'10币','money':10},{'title':'20币','money':20},{'title':'50币','money':50},{'title':'100币','money':100}],
				 active:-1,
				 monechoose:'',
				 mainend:false,
		      // action sheet 选项内容
		      data: [
				{
					name:'请选择充值方式'
				},
				{
		        name: '支付宝支付',
		        method : this.getCamera	// 调用methods中的函数
		      }, 
				{
		        name: '微信支付', 
		        method : this.getLibrary	// 调用methods中的函数
		      },
			{
		        name: '确认充值方式', 
		        method : this.way	// 调用methods中的函数
		      }
				],
		      // action sheet 默认不显示，为false。操作sheetVisible可以控制显示与隐藏
		      sheetVisible: false,
		      monechoosefalse:false,
		    }
		  },
		  
		methods: {
			finishclick(){
				$('.wxpayshower').fadeOut();
				// this.$router.go(-1)  
				this.$router.push({
				   path:'/qianbao'
				})
			},
			againclick(){
			  $('.wxpayshower').fadeOut();
			},

			closedetail(){
			  	$('.detailsuccess').fadeOut();
			},
			stuindex(){
				this.$router.go(-1);
			},
			// 点击取消
			repeatclose(){
				$('.shoewr-chenhoupass').fadeOut();
			},
			// 点击去绑定微信
			repeatclick(){
				$('.shoewr-chenhoupass').fadeOut();
				this.d();
			},
			number(e){
				console.log(e);
			},
		    actionSheet: function(){
		    	// 打开action sheet
		      //   this.sheetVisible = true;
		      var that = this;
				  //判断是否在微信中打开
				  var ua = navigator.userAgent.toLowerCase();
				  var isWeixin = ua.indexOf('micromessenger') != -1;
				  if (isWeixin) {
					  if(that.is_band_wechat==1||that.is_band_wechat=='1'){
							
							if(that.monechoose==''){
								if(that.active==-1||that.active=='-1'){
									that.$toast({
									  message:'请选择充值金额',
									  position:'center'
									});
								}else{
									that.rechargeJsapi(that.moneyarr[that.active].money);
								}
							}else{
								if(Number(that.monechoose)<1){
										that.$toast({
										  message:'自定义金额不能小于1元',
										  position:'center'
										});
								}else{
									that.rechargeJsapi(that.monechoose);
								}
							} 
					  }else{
						 $('.shoewr-chenhoupass').fadeIn();
					  }
				  }else{
					  // that.$toast({
					  //   message:'请在微信中支付',
					  //   position:'center'
					  // });
					  if(that.monechoose==''){
						if(that.active==-1||that.active=='-1'){
							that.$toast({
							  message:'请选择充值金额',
							  position:'center'
							});
						}else{
							that.rechargeMweb(that.moneyarr[that.active].money);
						}
					}else{
  						if(Number(that.monechoose)<1){
  								that.$toast({
  								  message:'自定义金额不能小于1元',
  								  position:'center'
  								});
  						}else{
							that.rechargeMweb(that.monechoose);
						}
					} 
				  }
				 
		      
		    },
			rechargeMweb(mone){
				var that = this;
				that.axios({
					method:'get',
					url:that.$store.state.url +'User/rechargeMweb',
					params:{
						amount:mone
					}
				}).then(res=>{
					// alert(res.data.data);
					if(res.data.errcode==0||res.data.errcode=='0'){
						var data = res.data.data;
						var urlred = window.location.href+'?typepay=1'
						var url = data+'&redirect_url='+encodeURIComponent(urlred)+'';
						// console.log(url)
						window.location.href=url; 
					}else{
						that.$toast({
							message:res.data.msg,
							position:'center'
						});
					}
				})
			},
		
		    rechargeJsapi(mone){
					var that = this;
					that.axios({
						method:'get',
						url:that.$store.state.url +'User/rechargeJsapi',
						params:{
							amount:mone
						}
					}).then(res=>{
						// alert(res.data.data);
						if(res.data.errcode==0||res.data.errcode=='0'){
							var data = res.data.data;
							var data1 ={
								'appId': data.appId,
								'nonceStr': data.nonceStr,
								'package': data.package,
								'paySign': data.paySign,
								'signType': data.signType,
								'timeStamp': data.timeStamp,
							}
							that.callpay(data1);
						}else{
							that.$toast({
								message:res.data.msg,
								position:'center'
							});
						}
					})
				},
		
		    callpay(data){
				if (typeof WeixinJSBridge == "undefined"){
			
				if( document.addEventListener ){
					document.addEventListener('WeixinJSBridgeReady', this.jsApiCall, false);
				}else if (document.attachEvent){
					document.attachEvent('WeixinJSBridgeReady', this.jsApiCall);
					document.attachEvent('onWeixinJSBridgeReady', this.jsApiCall);
				}
				}else{
					var that = this;
					that.jsApiCall(data);
				}
		    },
		    jsApiCall(data){
		      WeixinJSBridge.invoke(
		    	'getBrandWCPayRequest',
		    	data,
		    	function(res){
		    	  // alert(res);
		    	  // alert(res.err_msg);
		    	  if(res.err_msg == "get_brand_wcpay_request:ok") {
					    $('.detailsuccess').fadeIn();
		    	  }else{
		    		  alert('支付失败');
					  // $('.detailfail').fadeIn();
		    	  }
		    	}
		      );
		    },
		    getCamera:function(){
		      console.log("1")
		    },
		    getLibrary: function(){
		      console.log("2")
		    },
			way(){
		      console.log('aa')
			},
			chooseclick(){
				this.active = -1;
				this.mainend = true;
			},
			// 点击选择自定义金额
			mianend(){
				this.active = -1;
				this.mainend = true;
			},
			mianclick(index){
				this.active = index;	
				this.mainend = false;
				this.monechoose = '';
			}
		  },
		watch:{
			monechoose(){
				var that = this;
				var monechoose = that.monechoose;
				var str = '' + that.monechoose;
				  if (str.indexOf('.') != -1) {
					let arr = str.split('');
					arr.splice(arr.length - 1);
					let str2 = arr.join('');
					that.monechoose = +str2;
				  }
			}
		},
		mounted() {
			this.sdk.getJSSDK('','',this.$store.state.url);	
			this.loginsuccess();
			
			
			if(this.$route.query.typepay){
				var typepay = this.$route.query.typepay;
				if(typepay==1||typepay=='1'){
					$('.wxpayshower').fadeIn();
				}
			}
			
			
			this.axios.get(this.$store.state.url + "User/getUserInfo").then(res=>{
			  // console.log(res.data)
			  if (res.data.errcode == 0||res.data.errcode == '0'){
				  this.is_band_wechat = res.data.data.is_band_wechat;
			  }
			})
			
		}
	}
</script>
<style scoped>
	.detailcontent2{
		position: relative;
		/* top: 1rem; */
	}
.detailcontent1{
	width: 6.9rem;
	position: relative;
	top: 1rem;
	left: 50%;
	margin-left: -3.45rem;
	background: #fff;
	/* padding-bottom: .6rem; */
	border-radius: 0.08rem;
	overflow: hidden;
}
#congzi {
  background-color: #f7f7f7;
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
}
.top {
  width: 92%;
  height: 1.06rem;
  background: rgba(255, 255, 255, 1);
  border-radius: 0.1rem 0.1rem 0 0;
  margin: 0 auto;
  margin-top: 0.3rem;
}
.top-center {
  width: 88%;
  height: 1.06rem;
  margin: 0 auto;
  border-bottom: 1px solid #ededed;
  margin: 0 auto;
}

.top-center > span {
  height: 0.28rem;
  font-size: 0.3rem;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
  display: block;
  float: left;
  line-height: 1.06rem;
}
.top-center > i {
  height: 0.25rem;
  font-size: 0.26rem;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
  display: block;
  float: left;
  margin-left: 4.71rem;
  margin-top: 0.1rem;
}
.top-center > img {
  width: 0.1rem;
  height: 0.2rem;
  display: block;
  float: left;
  margin-left: 5.97rem;
  margin-top: -0.18rem;
  color: #999999;
}
.section {
  width: 92%;
  height: 4.18rem;
  background: rgba(255, 255, 255, 1);
  border-radius: 0px 0px 0.1rem 0.1rem;
  margin-left: 4%;
  padding: 0.4rem;
}
.section-main {
  width: 100%;
  height: 100%;
}
.online {
  height: 0.28rem;
  font-size: 0.3rem;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
  display: block;
  float: left;
}
.num {
  height: 0.23rem;
  font-size: 0.24rem;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  color: rgba(153, 153, 153, 1);
  margin-left: 0.16rem;
  margin-top: 0.05rem;
  display: block;
  float: left;
}
.section-main h1 {
  width: 100%;
  height: 0.28rem;
}
.section-main li {
  width: 1.84rem;
  height: 1.12rem;
  border-radius: 0.08rem;
  text-align: center;
	margin-right:.25rem;
	border: 0.02rem solid #DDDDDD;
	border-radius: 0.08rem;
	overflow: hidden;
}
.section-main li:nth-child(3n){
	margin-right: 0 !important;
}
.section-main li.mainactive{
	color: #0287FF !important;
	border: none;
	background: url('../../../src/assets/img/backin.png') no-repeat;
	background-size: 100% 100%;
}
.mainactive p{
	color: #0287FF !important;
}
.main-title{
	color: #333333;
	font-size: .4rem;
	margin-top: .15rem;
}
.main-title input{
	text-align: right;
/* .main-title input{ */
	width: 1rem;
	/* height: 0.4rem; */
	font-size: .4rem;
	border: none;
	outline: none;
	display: inline-block;
}
.main-title span{
	display: inline-block;
	font-size: .4rem;
	
}
.main-min{
	color: #999999;
	font-size: .24rem;
}
#end1{
	font-size: 0.26rem;
	color: #999;
	line-height:1.12rem;
	text-align: center;
}
#end {
  font-size: 0.26rem;
  font-family: PingFang-SC-Medium;
  color: #0287FF;
  text-align: center;
	border: 1px solid #0287FF !important;
}

#end .main-title,#end .main-min{
	color: #0287FF !important;
}
.main-list {
  display: flex;
  flex-wrap: wrap;
  margin-top: 0.4rem;
}
.main-list li {
  flex-shrink: 0;

  margin-bottom: 0.3rem;
}
#two {
  position: relative;
  border: 0.01rem solid #0287ff;
}
#two img {
  width: 0.3rem;
  height: 0.3rem;
  display: block;
  position: absolute;
  right: 0rem;
  bottom: 0rem;
}

.actionbut{
	width: 6.3rem;
	height: .88rem;
	/* margin-top: 2rem; */
	background: #0287FF;
	text-align: center;
	color: #fff;
	line-height: .88rem;
	border-radius: .44rem;
	margin:2rem auto 0;
	font-size: .3rem;
}

/* 支付成功 */
  .successtop{
  	width: 100%;
  	height: 5.65rem;
  	position: relative;
  }
  .successpic{
  	width: 100%;
  	height: 5.65rem;
  	position:absolute;
  }
  .successpic img{
  	width: 100%;
  	height: 100%;
  }
   .success_order{
  	position: absolute;
	width: 3.45rem;
	height: 1.6rem;
	top: .73rem;
	left: 50%;
	margin-left: -1.725rem;
  	/* bottom: .76rem; */
  }
  .detailfail .success_order{
	  width: 4.18rem;
	  margin-left: -2.09rem;
  }
   .success_order img{
	  width: 100%;
	  height: 100%;
  }
  .success_ordertext{
	  width: 100%;
	  position: absolute;
	 color: #FFFFFF;
	 font-size: .24rem;
	 top: 2.7rem;
  }
  .success_ordertext p{
	 text-align: center;
  }
  
  .successbottom{
	position: absolute;
	bottom: .77rem;
	width: 100%;
  }
  .successbottom div{
  	width: 2.6rem;
  	height: .7rem;
  	text-align: center;
  	line-height: .7rem;
  	color: #0287FF;
  	border: 1px solid #0287FF;
  	font-size: .28rem;
  	border-radius: .35rem;
	margin: auto;
  }
  .successactiveback{
	  color: #999999 !important;
	  border: 1px solid #999999 !important;
  }
  
  .successclose{
	  width: .7rem;
	  height: .7rem;
	  position: relative;
	  z-index: 99;
	  top: 1.5rem;
	  left: 50%;
	  margin-left: -.35rem;
  }
  .successclose img{
	  width: 100%;
	  height: 100%;
  }

</style>
